<template>
	<view class="safe-bottom">
		<view>
			<bg-search placeholder="输入客户名称" @search="onSearch"></bg-search>
			<view class="m-3">
				<template v-if="dataList.length > 0">
					<multi-item :item="item" @click="checkItem(item)" v-for="item, idx in dataList" :key="idx"
						:checked="item.checked"></multi-item>
				</template>
				<template v-else>
					<u-empty>
					</u-empty>
				</template>
			</view>
			<view class="bt-footer">
				<view class="flex align-center justify-between" style="width:100%">
					<view>
						<view class="flex" @click="changeAll">
							<u--image v-if="checkAll" width="20" height="20"
								src="/static/images/ui/index/right.png"></u--image>
							<u--image v-else width="20" height="20"
								src="/static/images/ui/index/noright.png"></u--image>
							<view class="">全选</view>
						</view>
					</view>
					<view style="width: 280rpx;">
						<view>已选：{{ selectUserStr }}</view>
					</view>
					<view>
						<bg-btn @click="onConfirm" style="width: 276rpx;height: 88rpx;">确认</bg-btn>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import multiItem from './multiItem.vue'
import { usersList, attendanceUserList, leaderUserList } from "@/api/system/user.js"
export default {
	components: { multiItem },
	onLoad(options) {
		this.work = options.work
		this.params.projectId = options.pid
		this.jumpTitle = options.jumpTitle || ''
		if (options.jumpTitle == '选择考勤用户') {
			// 接收从考勤记录页面传递的参数
			this.workDate = options.workDate || '' // 考勤日期
			this.workType = options.workType || '' // 工作性质
			this.workJobType = options.workJobType || '' // 工种

			// 打印接收到的参数，方便调试
			console.log('接收到的参数:', {
				workDate: this.workDate,
				workType: this.workType,
				workJobType: this.workJobType
			})
		}


	},
	mounted() {
		const eventChannel = this.getOpenerEventChannel()
		eventChannel.on('acceptDataFromOpener', (res) => {
			this.propSelected = res.data
		})
		this.getData()
	},
	data() {
		return {
			checkAll: false,
			propSelected: [],
			work: '',
			keyword: '',
			dataList: [],
			selectedItem: [],
			params: {
				projectId: '',
				realName: '',
				pageNum: 1,
				pageSize: 20
			},
			jumpTitle: '',
			workDate: '', // 考勤日期
			workType: '', // 工作性质
			workJobType: '' // 工种
		}
	},
	computed: {
		selectUserStr() {
			return this.selectedItem.map(i => i.userName).join(',')
		}
	},
	methods: {
		changeAll() {
			this.checkAll = !this.checkAll
			this.selectedItem = []
			this.dataList.forEach(item => {
				item.checked = this.checkAll
				if (this.checkAll) {
					this.selectedItem.push(item)
				}
			})


		},
		onSearch(e) {
			this.params.realName = e
			this.params.pageNum = 1
			this.dataList = []
			this.getData()
		},
		getData() {
			if (this.jumpTitle && this.jumpTitle == '选择考勤用户') {
				// 先不进行筛选
				// this.params.workDate = this.workDate
				// this.params.workType = this.workType
				// this.params.workJobType = this.workJobType
				leaderUserList(this.params).then(res => {
					res.data.rows.forEach(item => {
						let find = this.propSelected.find(_item => _item.userId == item.userId)
						if (find) {
							this.$set(item, "checked", true)
							this.selectedItem.push(item)
						} else {
							this.$set(item, "checked", false)
						}
					})
					this.dataList = [...this.dataList, ...res.data.rows]
				})
			} else {
				attendanceUserList(this.params).then(res => {
					res.data.rows.forEach(item => {
						let find = this.propSelected.find(_item => _item.userId == item.userId)
						if (find) {
							this.$set(item, "checked", true)
							this.selectedItem.push(item)
						} else {
							this.$set(item, "checked", false)
						}
					})
					this.dataList = [...this.dataList, ...res.data.rows]
				})
			}

		},
		checkItem(item) {
			let find = this.selectedItem.findIndex(_item => item.userId == _item.userId)
			if (find >= 0) {
				this.selectedItem.splice(find, 1)
				item.checked = false
			} else {
				this.selectedItem.push(item)
				item.checked = true
			}
		},
		onConfirm() {
			// console.log(this.selectedItem);
			// return
			if (this.selectedItem.length > 0) {
				uni.$emit("selected-users", this.selectedItem)
				uni.navigateBack()
			} else {
				this.$modal.msgError("请选择用户")
			}
		}
	}
}
</script>

<style></style>
